
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Store · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="combineReducers.html" />
    
    
    <link rel="prev" href="createStore.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    Read Me
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../introduction/">
            
                <a href="../introduction/">
            
                    
                    Introduction
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../introduction/Motivation.html">
            
                <a href="../introduction/Motivation.html">
            
                    
                    Motivation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../introduction/CoreConcepts.html">
            
                <a href="../introduction/CoreConcepts.html">
            
                    
                    Core Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../introduction/ThreePrinciples.html">
            
                <a href="../introduction/ThreePrinciples.html">
            
                    
                    Three Principles
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../introduction/PriorArt.html">
            
                <a href="../introduction/PriorArt.html">
            
                    
                    Prior Art
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../introduction/Ecosystem.html">
            
                <a href="../introduction/Ecosystem.html">
            
                    
                    Ecosystem
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../introduction/Examples.html">
            
                <a href="../introduction/Examples.html">
            
                    
                    Examples
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../basics/">
            
                <a href="../basics/">
            
                    
                    Basics
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../basics/Actions.html">
            
                <a href="../basics/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../basics/Reducers.html">
            
                <a href="../basics/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="../basics/Store.html">
            
                <a href="../basics/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="../basics/DataFlow.html">
            
                <a href="../basics/DataFlow.html">
            
                    
                    Data Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="../basics/UsageWithReact.html">
            
                <a href="../basics/UsageWithReact.html">
            
                    
                    Usage with React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="../basics/ExampleTodoList.html">
            
                <a href="../basics/ExampleTodoList.html">
            
                    
                    Example: Todo List
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../advanced/">
            
                <a href="../advanced/">
            
                    
                    Advanced
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../advanced/AsyncActions.html">
            
                <a href="../advanced/AsyncActions.html">
            
                    
                    Async Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../advanced/AsyncFlow.html">
            
                <a href="../advanced/AsyncFlow.html">
            
                    
                    Async Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../advanced/Middleware.html">
            
                <a href="../advanced/Middleware.html">
            
                    
                    Middleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../advanced/UsageWithReactRouter.html">
            
                <a href="../advanced/UsageWithReactRouter.html">
            
                    
                    Usage with React Router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../advanced/ExampleRedditAPI.html">
            
                <a href="../advanced/ExampleRedditAPI.html">
            
                    
                    Example: Reddit API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" >
            
                <span>
            
                    
                    Next Steps
            
                </span>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../recipes/">
            
                <a href="../recipes/">
            
                    
                    Recipes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../recipes/MigratingToRedux.html">
            
                <a href="../recipes/MigratingToRedux.html">
            
                    
                    Migrating to Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../recipes/UsingObjectSpreadOperator.html">
            
                <a href="../recipes/UsingObjectSpreadOperator.html">
            
                    
                    Using Object Spread Operator
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../recipes/ReducingBoilerplate.html">
            
                <a href="../recipes/ReducingBoilerplate.html">
            
                    
                    Reducing Boilerplate
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../recipes/ServerRendering.html">
            
                <a href="../recipes/ServerRendering.html">
            
                    
                    Server Rendering
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../recipes/WritingTests.html">
            
                <a href="../recipes/WritingTests.html">
            
                    
                    Writing Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../recipes/ComputingDerivedData.html">
            
                <a href="../recipes/ComputingDerivedData.html">
            
                    
                    Computing Derived Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../recipes/ImplementingUndoHistory.html">
            
                <a href="../recipes/ImplementingUndoHistory.html">
            
                    
                    Implementing Undo History
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../recipes/IsolatingSubapps.html">
            
                <a href="../recipes/IsolatingSubapps.html">
            
                    
                    Isolating Subapps
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="../recipes/StructuringReducers.html">
            
                <a href="../recipes/StructuringReducers.html">
            
                    
                    Structuring Reducers
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.9.1" data-path="../recipes/reducers/PrerequisiteConcepts.html">
            
                <a href="../recipes/reducers/PrerequisiteConcepts.html">
            
                    
                    Prerequisite Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.2" data-path="../recipes/reducers/BasicReducerStructure.html">
            
                <a href="../recipes/reducers/BasicReducerStructure.html">
            
                    
                    Basic Reducer Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.3" data-path="../recipes/reducers/SplittingReducerLogic.html">
            
                <a href="../recipes/reducers/SplittingReducerLogic.html">
            
                    
                    Splitting Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.4" data-path="../recipes/reducers/RefactoringReducersExample.html">
            
                <a href="../recipes/reducers/RefactoringReducersExample.html">
            
                    
                    Refactoring Reducers Example
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.5" data-path="../recipes/reducers/UsingCombineReducers.html">
            
                <a href="../recipes/reducers/UsingCombineReducers.html">
            
                    
                    Using combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.6" data-path="../recipes/reducers/BeyondCombineReducers.html">
            
                <a href="../recipes/reducers/BeyondCombineReducers.html">
            
                    
                    Beyond combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.7" data-path="../recipes/reducers/NormalizingStateShape.html">
            
                <a href="../recipes/reducers/NormalizingStateShape.html">
            
                    
                    Normalizing State Shape
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.8" data-path="../recipes/reducers/UpdatingNormalizedData.html">
            
                <a href="../recipes/reducers/UpdatingNormalizedData.html">
            
                    
                    Updating Normalized Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.9" data-path="../recipes/reducers/ReusingReducerLogic.html">
            
                <a href="../recipes/reducers/ReusingReducerLogic.html">
            
                    
                    Reusing Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.10" data-path="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                <a href="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                    
                    Immutable Update Patterns
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.11" data-path="../recipes/reducers/InitializingState.html">
            
                <a href="../recipes/reducers/InitializingState.html">
            
                    
                    Initializing State
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="../recipes/UsingImmutableJS.html">
            
                <a href="../recipes/UsingImmutableJS.html">
            
                    
                    Using Immutable.JS with Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../FAQ.html">
            
                <a href="../FAQ.html">
            
                    
                    FAQ
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../faq/General.html">
            
                <a href="../faq/General.html">
            
                    
                    General
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../faq/Reducers.html">
            
                <a href="../faq/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../faq/OrganizingState.html">
            
                <a href="../faq/OrganizingState.html">
            
                    
                    Organizing State
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../faq/StoreSetup.html">
            
                <a href="../faq/StoreSetup.html">
            
                    
                    Store Setup
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../faq/Actions.html">
            
                <a href="../faq/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../faq/ImmutableData.html">
            
                <a href="../faq/ImmutableData.html">
            
                    
                    Immutable Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../faq/CodeStructure.html">
            
                <a href="../faq/CodeStructure.html">
            
                    
                    Code Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="../faq/Performance.html">
            
                <a href="../faq/Performance.html">
            
                    
                    Performance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="../faq/ReactRedux.html">
            
                <a href="../faq/ReactRedux.html">
            
                    
                    React Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="../faq/Miscellaneous.html">
            
                <a href="../faq/Miscellaneous.html">
            
                    
                    Miscellaneous
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../Troubleshooting.html">
            
                <a href="../Troubleshooting.html">
            
                    
                    Troubleshooting
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../Glossary.html">
            
                <a href="../Glossary.html">
            
                    
                    Glossary
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="./">
            
                <a href="./">
            
                    
                    API Reference
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="createStore.html">
            
                <a href="createStore.html">
            
                    
                    createStore
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.9.2" data-path="Store.html">
            
                <a href="Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.3" data-path="combineReducers.html">
            
                <a href="combineReducers.html">
            
                    
                    combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.4" data-path="applyMiddleware.html">
            
                <a href="applyMiddleware.html">
            
                    
                    applyMiddleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.5" data-path="bindActionCreators.html">
            
                <a href="bindActionCreators.html">
            
                    
                    bindActionCreators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.6" data-path="compose.html">
            
                <a href="compose.html">
            
                    
                    compose
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../CHANGELOG.md">
            
                <span>
            
                    
                    Change Log
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../PATRONS.md">
            
                <span>
            
                    
                    Patrons
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../Feedback.html">
            
                <a href="../Feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >Store</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="store">Store</h1>
<p>A <a href="../Glossary.html#store" class="glossary-term" title="">store</a> holds the whole <a href="../Glossary.html#state">state tree</a> of your application.<br>The only way to change the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> inside it is to dispatch an <a href="../Glossary.html#action">action</a> on it.  </p>
<p>A <a href="../Glossary.html#store" class="glossary-term" title="">store</a> is not a class. It&apos;s just an object with a few methods on it.<br>To create it, pass your root <a href="../Glossary.html#reducer">reducing function</a> to <a href="createStore.html"><code>createStore</code></a>.</p>
<blockquote>
<h5 id="a-note-for-flux-users">A Note for Flux Users</h5>
<p>If you&apos;re coming from Flux, there is a single important difference you need to understand. Redux doesn&apos;t have a Dispatcher or support many stores. <strong>Instead, there is just a single <a href="../Glossary.html#store" class="glossary-term" title="">store</a> with a single root <a href="../Glossary.html#reducer">reducing function</a>.</strong> As your app grows, instead of adding stores, you split the root <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> into smaller reducers independently operating on the different parts of the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree. You can use a helper like <a href="combineReducers.html"><code>combineReducers</code></a> to combine them. This is similar to how there is just one root component in a React app, but it is composed out of many small components.</p>
</blockquote>
<h3 id="store-methods">Store Methods</h3>
<ul>
<li><a href="#getState"><code>getState()</code></a></li>
<li><a href="#dispatch"><code>dispatch(action)</code></a></li>
<li><a href="#subscribe"><code>subscribe(listener)</code></a></li>
<li><a href="#replaceReducer"><code>replaceReducer(nextReducer)</code></a></li>
</ul>
<h2 id="store-methods">Store Methods</h2>
<h3 id="getstate"><a id="getState"></a><a href="#getState"><code>getState()</code></a></h3>
<p>Returns the current <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree of your application.<br>It is equal to the last value returned by the <a href="../Glossary.html#store" class="glossary-term" title="">store</a>&apos;s <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a>.</p>
<h4 id="returns">Returns</h4>
<p><em>(any)</em>: The current <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree of your application.</p>
<hr>

<h3 id="dispatchaction"><a id="dispatch"></a><a href="#dispatch"><code>dispatch(action)</code></a></h3>
<p>Dispatches an <a href="../Glossary.html#action" class="glossary-term" title="">action</a>. This is the only way to trigger a <a href="../Glossary.html#state" class="glossary-term" title="">state</a> change.</p>
<p>The <a href="../Glossary.html#store" class="glossary-term" title="">store</a>&apos;s reducing function will be called with the current <a href="#getState"><code>getState()</code></a> result and the given <code>action</code> synchronously. Its return value will be considered the next <a href="../Glossary.html#state" class="glossary-term" title="">state</a>. It will be returned from <a href="#getState"><code>getState()</code></a> from now on, and the change listeners will immediately be notified.</p>
<blockquote>
<h5 id="a-note-for-flux-users">A Note for Flux Users</h5>
<p>If you attempt to call <code>dispatch</code> from inside the <a href="../Glossary.html#reducer">reducer</a>, it will throw with an error saying &#x201C;Reducers may not dispatch actions.&#x201D; This is similar to &#x201C;Cannot dispatch in a middle of dispatch&#x201D; error in Flux, but doesn&apos;t cause the problems associated with it. In Flux, a dispatch is forbidden while Stores are handling the <a href="../Glossary.html#action" class="glossary-term" title="">action</a> and emitting updates. This is unfortunate because it makes it impossible to dispatch actions from component lifecycle hooks or other benign places.</p>
<p>In Redux, subscriptions are called after the root <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> has returned the new <a href="../Glossary.html#state" class="glossary-term" title="">state</a>, so you <em>may</em> dispatch in the subscription listeners. You are only disallowed to dispatch inside the reducers because they must have no side effects. If you want to cause a side effect in response to an <a href="../Glossary.html#action" class="glossary-term" title="">action</a>, the right place to do this is in the potentially async <a href="../Glossary.html#action-creator">action creator</a>.</p>
</blockquote>
<h4 id="arguments">Arguments</h4>
<ol>
<li><code>action</code> (<em>Object</em><sup>&#x2020;</sup>): A plain object describing the change that makes sense for your application. Actions are the only way to get data into the <a href="../Glossary.html#store" class="glossary-term" title="">store</a>, so any data, whether from the UI events, network callbacks, or other sources such as WebSockets needs to eventually be dispatched as actions. Actions must have a <code>type</code> field that indicates the type of <a href="../Glossary.html#action" class="glossary-term" title="">action</a> being performed. Types can be defined as constants and imported from another module. It&apos;s better to use strings for <code>type</code> than <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Symbol" target="_blank">Symbols</a> because strings are serializable. Other than <code>type</code>, the structure of an <a href="../Glossary.html#action" class="glossary-term" title="">action</a> object is really up to you. If you&apos;re interested, check out <a href="https://github.com/acdlite/flux-standard-action" target="_blank">Flux Standard Action</a> for recommendations on how actions could be constructed.</li>
</ol>
<h4 id="returns">Returns</h4>
<p>(Object<sup>&#x2020;</sup>): The dispatched <a href="../Glossary.html#action" class="glossary-term" title="">action</a> (see notes).</p>
<h4 id="notes">Notes</h4>
<p><sup>&#x2020;</sup> The &#x201C;vanilla&#x201D; <a href="../Glossary.html#store" class="glossary-term" title="">store</a> implementation you get by calling <a href="createStore.html"><code>createStore</code></a> only supports plain object actions and hands them immediately to the <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a>.</p>
<p>However, if you wrap <a href="createStore.html"><code>createStore</code></a> with <a href="applyMiddleware.html"><code>applyMiddleware</code></a>, the <a href="../Glossary.html#middleware" class="glossary-term" title="">middleware</a> can interpret actions differently, and provide support for dispatching <a href="../Glossary.html#async-action">async actions</a>. Async actions are usually asynchronous primitives like Promises, Observables, or thunks.</p>
<p><a href="../Glossary.html#middleware" class="glossary-term" title="">Middleware</a> is created by the community and does not ship with Redux by default. You need to explicitly install packages like <a href="https://github.com/gaearon/redux-thunk" target="_blank">redux-thunk</a> or <a href="https://github.com/acdlite/redux-promise" target="_blank">redux-promise</a> to use it. You may also create your own <a href="../Glossary.html#middleware" class="glossary-term" title="">middleware</a>.</p>
<p>To learn how to describe asynchronous API calls, read the current <a href="../Glossary.html#state" class="glossary-term" title="">state</a> inside <a href="../Glossary.html#action" class="glossary-term" title="">action</a> creators, perform side effects, or chain them to execute in a sequence, see the examples for <a href="applyMiddleware.html"><code>applyMiddleware</code></a>.</p>
<h4 id="example">Example</h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { createStore } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux&apos;</span>
<span class="hljs-keyword">let</span> store = createStore(todos, [ <span class="hljs-string">&apos;Use Redux&apos;</span> ])

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addTodo</span>(<span class="hljs-params">text</span>) </span>{
  <span class="hljs-keyword">return</span> {
    type: <span class="hljs-string">&apos;ADD_TODO&apos;</span>,
    text
  }
}

store.dispatch(addTodo(<span class="hljs-string">&apos;Read the docs&apos;</span>))
store.dispatch(addTodo(<span class="hljs-string">&apos;Read about the middleware&apos;</span>))
</code></pre>
<hr>

<h3 id="subscribelistener"><a id="subscribe"></a><a href="#subscribe"><code>subscribe(listener)</code></a></h3>
<p>Adds a change listener. It will be called any time an <a href="../Glossary.html#action" class="glossary-term" title="">action</a> is dispatched, and some part of the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree may potentially have changed. You may then call <a href="#getState"><code>getState()</code></a> to read the current <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree inside the callback.</p>
<p>You may call <a href="#dispatch"><code>dispatch()</code></a> from a change listener, with the following caveats:</p>
<ol>
<li><p>The listener should only call <a href="#dispatch"><code>dispatch()</code></a> either in response to user actions or under specific conditions (e. g. dispatching an <a href="../Glossary.html#action" class="glossary-term" title="">action</a> when the <a href="../Glossary.html#store" class="glossary-term" title="">store</a> has a specific field). Calling <a href="#dispatch"><code>dispatch()</code></a> without any conditions is technically possible, however it leads to an infinite loop as every <a href="#dispatch"><code>dispatch()</code></a> call usually triggers the listener again.</p>
</li>
<li><p>The subscriptions are snapshotted just before every <a href="#dispatch"><code>dispatch()</code></a> call. If you subscribe or unsubscribe while the listeners are being invoked, this will not have any effect on the <a href="#dispatch"><code>dispatch()</code></a> that is currently in progress. However, the next <a href="#dispatch"><code>dispatch()</code></a> call, whether nested or not, will use a more recent snapshot of the subscription list.</p>
</li>
<li><p>The listener should not expect to see all <a href="../Glossary.html#state" class="glossary-term" title="">state</a> changes, as the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> might have been updated multiple times during a nested <a href="#dispatch"><code>dispatch()</code></a> before the listener is called. It is, however, guaranteed that all subscribers registered before the <a href="#dispatch"><code>dispatch()</code></a> started will be called with the latest <a href="../Glossary.html#state" class="glossary-term" title="">state</a> by the time it exits.</p>
</li>
</ol>
<p>It is a low-level API. Most likely, instead of using it directly, you&apos;ll use React (or other) bindings. If you commonly use the callback as a hook to react to <a href="../Glossary.html#state" class="glossary-term" title="">state</a> changes, you might want to <a href="https://github.com/reactjs/redux/issues/303#issuecomment-125184409" target="_blank">write a custom <code>observeStore</code> utility</a>. The <code>Store</code> is also an <a href="https://github.com/zenparsing/es-observable" target="_blank"><code>Observable</code></a>, so you can <code>subscribe</code> to changes with libraries like <a href="https://github.com/ReactiveX/RxJS" target="_blank">RxJS</a>. </p>
<p>To unsubscribe the change listener, invoke the function returned by <code>subscribe</code>.</p>
<h4 id="arguments">Arguments</h4>
<ol>
<li><code>listener</code> (<em>Function</em>): The callback to be invoked any time an <a href="../Glossary.html#action" class="glossary-term" title="">action</a> has been dispatched, and the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree might have changed. You may call <a href="#getState"><code>getState()</code></a> inside this callback to read the current <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree. It is reasonable to expect that the <a href="../Glossary.html#store" class="glossary-term" title="">store</a>&apos;s <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> is a pure function, so you may compare references to some deep path in the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree to learn whether its value has changed.</li>
</ol>
<h5 id="returns">Returns</h5>
<p>(<em>Function</em>): A function that unsubscribes the change listener.</p>
<h5 id="example">Example</h5>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">select</span>(<span class="hljs-params">state</span>) </span>{
  <span class="hljs-keyword">return</span> state.some.deep.property
}

<span class="hljs-keyword">let</span> currentValue
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleChange</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">let</span> previousValue = currentValue
  currentValue = select(store.getState())

  <span class="hljs-keyword">if</span> (previousValue !== currentValue) {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;Some deep nested property changed from&apos;</span>, previousValue, <span class="hljs-string">&apos;to&apos;</span>, currentValue)
  }
}

<span class="hljs-keyword">let</span> unsubscribe = store.subscribe(handleChange)
unsubscribe()
</code></pre>
<hr>

<h3 id="replacereducernextreducer"><a id="replaceReducer"></a><a href="#replaceReducer"><code>replaceReducer(nextReducer)</code></a></h3>
<p>Replaces the <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> currently used by the <a href="../Glossary.html#store" class="glossary-term" title="">store</a> to calculate the <a href="../Glossary.html#state" class="glossary-term" title="">state</a>.</p>
<p>It is an advanced API. You might need this if your app implements code splitting, and you want to load some of the reducers dynamically. You might also need this if you implement a hot reloading mechanism for Redux.</p>
<h4 id="arguments">Arguments</h4>
<ol>
<li><code>reducer</code> (<em>Function</em>) The next <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> for the <a href="../Glossary.html#store" class="glossary-term" title="">store</a> to use.</li>
</ol>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="createStore.html" class="navigation navigation-prev " aria-label="Previous page: createStore">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="combineReducers.html" class="navigation navigation-next " aria-label="Next page: combineReducers">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Store","level":"1.9.2","depth":2,"next":{"title":"combineReducers","level":"1.9.3","depth":2,"path":"api/combineReducers.md","ref":"./api/combineReducers.md","articles":[]},"previous":{"title":"createStore","level":"1.9.1","depth":2,"path":"api/createStore.md","ref":"./api/createStore.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/Store.md","mtime":"2017-03-13T14:28:11.303Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-03-15T14:47:19.389Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

